<template>
    <div class="game-dashboard">
        <header class="game-header">
        <div class="logo-small">
          <el-image style="width: 128px; height: 72px" alt="logo" :src="logo" fit="contain"/>
          <span>数字宝藏猎人</span>
        </div>
        
        <nav class="game-nav">
          <el-menu mode="horizontal" class="nav-menu" :ellipsis="false" default-active="/" router active-text-color="#c885f5">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="world">探索世界</el-menu-item>
            <el-menu-item index="market">交易市场</el-menu-item>
            <el-menu-item index="inventory">我的背包</el-menu-item>
            <el-menu-item index="collection">收藏馆</el-menu-item>
            <el-menu-item index="social">社交广场</el-menu-item>
          </el-menu>
        </nav>
        
        <div class="wallet-info">
          <el-dropdown trigger="click">
            
            <div class="wallet-display">
              <i class="wallet-icon"></i>
              <span v-if="walletStore.isConnected" class="wallet-address">{{shortenAddress(walletStore.walletAddress)}}</span>
              <router-link v-else class="wallet-address" to="/login" style="text-decoration: none;">未连接钱包,请登录</router-link>
              <i class="el-icon-arrow-down"></i>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>账户详情</el-dropdown-item>
                <el-dropdown-item>交易记录</el-dropdown-item>
                <el-dropdown-item divided @click="walletStore.disconnectWallet()">断开连接</el-dropdown-item>

              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        </header>
    
    <router-view></router-view>
    </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useWalletStore } from '../stores/walletStore'
import "../styles/HomeView.css"
import logo from '../assets/logo.jpeg' // Import the image

const walletStore = useWalletStore()
// 状态变量
const walletAddress = walletStore.walletAddress
// **🎯 监听钱包地址变化**
watch(() => walletStore.walletAddress, (newAddress) => {
  if (newAddress) {
    console.log("🔄 账户切换为:", newAddress);
    // 这里可以触发页面刷新、数据更新等操作

  } else {
    console.log("❌ 钱包已断开");
  }
});



// 断开钱包连接
const disconnectWallet = () => {
  walletStore.isConnected = false
  walletStore.walletAddress = ''
  
  // 移除事件监听器
  if (window.ethereum) {
    window.ethereum.removeListener('accountsChanged', handleAccountsChanged)
  }
  
  ElMessage.info('已断开钱包连接')
}

// 缩短地址显示格式
const shortenAddress = (address) => {
  if (!address) return ''
  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`
}
</script>
